<!--
 * @Author: xuman
 * @Date: 2020-06-15 21:15:44
 * @LastEditors: xuman
 * @LastEditTime: 2020-06-17 11:40:57
-->
<template>
  <div class="page">
    <ModelSearchBar
      :searchForm.sync="searchForm"
      :options="options"
      :getList="getReportData"
      :dateType="0"
    />
    <el-table :data="data" v-loading="loading">
      <el-table-column
        :prop="item.prop"
        :label="item.label"
        v-for="(item, index) in columns"
        :key="index"
      />
    </el-table>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import ModelSearchBar from '../components/ModelSearchBar.vue'
import * as Api from '@/api/risksystem/xmCustomizeReport/modelReport'

@Component({
  components: {
    ModelSearchBar
  }
})
export default class DistributionStatistics extends Vue {
  private options: any = {}
  private searchForm: any = {
    unit_type: 2
  }
  private loading: boolean = false
  private data: any[] = []
  private columns: any[] = [
    {
      prop: 'date',
      label: '报告月'
    },
    {
      prop: 'sample_capacity',
      label: '样本量'
    },
    {
      prop: 'max_value',
      label: '最大值'
    },
    {
      prop: 'min_value',
      label: '最小值'
    },
    {
      prop: 'avg_value',
      label: '均值'
    },
    {
      prop: 'median_value',
      label: '中位数'
    },
    {
      prop: 'mode_value',
      label: '众数'
    },
    {
      prop: 'standard_deviation',
      label: '标准差'
    },
    {
      prop: 'range_value',
      label: '极差'
    },
    {
      prop: 'skewness_value',
      label: '偏度'
    },
    {
      prop: 'kurtosis_value',
      label: '峰度'
    },
    {
      prop: 'variation_coefficient',
      label: '变异系数'
    }
  ]

  private async getReportData() {
    this.loading = true
    const { unit_type } = this.searchForm
    try {
      const {
        data: { report }
      } = await Api.getModelDistributionReportData(this.searchForm)
      this.data = report
    } finally {
      this.loading = false
    }
  }

  async created() {
    await this.getSelectOptions()
    this.getReportData()
  }

  private async getSelectOptions() {
    const obj = {
      type: ['distribution_statistics']
    }
    const {
      data: { distribution_statistics }
    } = await Api.getSelectOptions(obj)
    this.options = distribution_statistics
  }
}
</script>
<style lang="scss" scoped>
.page {
  padding: 20px;
  .el-table {
    width: 100%;
  }
}
</style>
